<template>
  <div>
    <el-dialog
      title="配置车辆"
      :visible.sync="dialogFormVisible"
      width="640px"
    >
      <!-- 车辆信息 -->
      <div class="header">
        <div class="num">
          <label>司机编号：</label>
          <span style="color: #aaadb6;">{{ formData.userId }}</span>
        </div>
        <div class="name">
          <label>司机名称：</label>
          <span style="color: #aaadb6;">{{ formData.name }}</span>
        </div>
        <div class="status">
          <label>司机电话：</label>
          <span style="color: #aaadb6;">{{ formData.mobile }}</span>
        </div>
        <div class="load">
          <label>所属机构：</label>
          <span style="color: #aaadb6;">{{ formData.agency.name }}</span>
        </div>
      </div>
      <!-- 选择车辆 -->
      <div class="searchBox">
        <label>配置车辆：</label>
        <el-select
          v-model="formData.truck.licensePlate"
          class="search-select"
          placeholder="请选择车辆名称"
          @change="changeSelect"
        >
          <el-option
            v-for="item in selectBase"
            :key="item.id"
            :label="item.licensePlate"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <div class="driverTable">
        <el-table
          :data="tableData"
          stripe
          style="height: 186px;"
        >
          <el-table-column
            prop="licensePlate"
            width="180"
            label="车牌号"
          >
          </el-table-column>
          <el-table-column
            prop="workStatus"
            label="车辆状态"
            width="236"
          >
            <template #default="scope">
              <span
                class="tableColumn-status"
                :class="{'stop-use': scope.row.workStatus === 0}"
              >
                {{ scope.row.workStatus === 0 ? '停用' : '可用' }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="120"
            align="center"
          >
            <template #default="scope">
              <el-link
                type="primary"
                :underline="false"
                @click="$router.push(`vehicle-detail?id=${scope.row.id}`)"
              >查看</el-link>
              <el-divider direction="vertical"></el-divider>
              <el-link
                type="danger"
                :underline="false"
                @click="delCar"
              >删除</el-link>
            </template>
          </el-table-column>
          <!-- 空的时候显示 -->
          <el-card
            slot="empty"
            shadow="never"
            class="empty-card"
          >
            <img
              src="@/assets/empty.png"
              alt=""
              style="width: 102px;
              height: 79px;"
            >
            <span>这里空空如也</span>
          </el-card>
        </el-table>
      </div>
      <!-- 操作区域 -->
      <div
        slot="footer"
        class="dialog-footer"
        style="text-align: center"
      >
        <el-button
          class="save-btn"
          @click="submitFn"
        >确认</el-button>
        <el-button
          class="cancel-btn"
          @click="dialogFormH"
        >取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { driverArrangeCar } from '@/api/transit'
export default {
  name: 'VehicleConfigure',
  props: {
    formBase: {
      type: Object,
      required: true
    },
    selectBase: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      dialogFormVisible: false,
      selectValue: '',
      tableData: [
        {
          licensePlate: '',
          workStatus: ''
        }
      ],
      formData: {
        userId: '',
        name: '',
        mobile: '',
        agency: {
          name: ''
        },
        truck: {
          licensePlate: ''
        }
      }
    }
  },
  methods: {
    // 弹层显示
    dialogFormV() {
      this.formData = { ... this.formBase }
      this.tableData = [
        {
          licensePlate: this.formData.truck.licensePlate,
          workStatus: this.formData.truck.workStatus,
          id: this.formData.truck.id
        }
      ]
      this.dialogFormVisible = true
    },
    // 弹层隐藏
    dialogFormH() {
      this.dialogFormVisible = false
    },
    // 获取司机列表
    async submitFn() {
      const res = await driverArrangeCar({
        driverIds: [this.formData.userId],
        truckIds: this.formData.truck.id
      })
      console.log(res)
      if (res.code === 200) {
        this.$message.success('配置车辆成功！')
        this.dialogFormH()
      } else {
        this.$message.error(res.msg)
      }
    },
    // 选择框数据变更时，列表数据也要变
    changeSelect(val) {
      this.selectBase.forEach(item => {
        if (item.id === val) {
          this.tableData = [
            {
              licensePlate: item.licensePlate,
              workStatus: item.workStatus,
              id: item.id
            }
          ]
        }
      })
    },
    // 删除
    delCar() {
      this.tableData = []
      this.formData.truck.licensePlate = ''
    }
  }
}
</script>

<style lang='scss' scoped>
::v-deep .el-dialog__body {
  padding: 20px 50px 20px 20px !important;
}
.dialog-footer {
  .save-btn{
      background-color: #e15536;
      border: 1px solid #e15536;
      color: #fff;
    }
    .save-btn:hover{
      background-color: #ffab98;
      border: 1px solid #ffab98;
    }
}
.header {
    margin-bottom: 18px;
    padding: 21px 52px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 584px;
    height: 131px;
    background-color: #fbfafa;
    flex-wrap: wrap;
    text-align: left;
    .num {
        width: 288px;
    }
    .name {
        width: 192px;
    }
    .status {
        width: 288px;
        .use {
            width: 41px;
            height: 20px;
            line-height: 20px;
            color: #aaadb6;
            display: inline-block;
            text-align: center;
            background-color: #37c608;
            color: #fff;
            border-radius: 13.5px;
        }
    }
    .load {
        width: 192px;
    }
    .volume {
        width: 288px;
    }
}
.search-select {
    width: 468px !important;
}
.driverTable {
    margin-top: 20px;
    padding-left: 20px;
}
::v-deep .empty-card {
    .el-card__body {
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}
.tableColumn-status::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #1dc779;
  border-radius: 50%;
  margin-right: 6px;
}
.stop-use::before {
  background-color: #e15536;
}
.dialog-footer {
  .save-btn{
      background-color: #e15536;
      border: 1px solid #e15536;
      color: #fff;
    }
    .save-btn:hover{
      background-color: #ffab98;
      border: 1px solid #ffab98;
    }
}
</style>
